<template>
  <div>
    <el-drawer
      :title="salesTitle"
      :visible.sync="salesDataOpen"
      :before-close="cancel"
      size="68%"
      class="always_title"
    >
      <div style="padding: 0 30px; height: 93%">
        <el-row>
          <el-col :span="24" class="margin_col">
            <div class="always_handerOne1">
              <el-collapse v-model="activeNames">
                <el-collapse-item name="0">
                  <template slot="title">
                    <div class="always_title1">
                      <div></div>
                      基本信息
                    </div>
                  </template>
                  <el-form
                    :model="formData"
                    ref="vForm"
                    :rules="rules"
                    label-position="center"
                    label-width="120px"
                    :size="medium"
                    style="display: flex; justify-content: flex-start"
                  >
                    <el-form-item label="销售线索" prop="salesLeadName">
                      <el-input
                        v-model="formData.salesLeadName"
                        type="text"
                        :disabled="isLook"
                        clearable
                        :size="medium"
                        placeholder="请输入销售线索"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="客户单位" prop="primaryCustomer">
                      <el-input
                        v-model="formData.primaryCustomer"
                        type="text"
                        :disabled="isLook"
                        readonly
                        clearable
                        :size="medium"
                        placeholder="请选择客户单位"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="线索来源" prop="leadSource">
                      <el-radio-group v-model="formData.leadSource" :disabled="isLook">
                        <el-radio label="0">公司指定</el-radio>
                        <el-radio label="1">个人</el-radio>
                        <el-radio label="2">其他</el-radio>
                      </el-radio-group>
                    </el-form-item>
                    <el-form-item label="项目名称" prop="projectName">
                      <el-input
                        :disabled="isLook"
                        v-model="formData.projectName"
                        type="text"
                        clearable
                        :size="medium"
                        placeholder="请输入项目名称"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="项目类别" prop="projectCategoryName">
                      <el-radio-group v-model="formData.projectCategoryName" :size="medium" :disabled="isLook">
                        <el-radio label="计划项目">计划项目</el-radio>
                        <el-radio label="储备项目">储备项目</el-radio>
                      </el-radio-group>
                    </el-form-item>
                    <el-form-item label="科目类别" prop="accountCategory">
                      <el-radio-group v-model="formData.accountCategory" :size="medium" :disabled="isLook">
                        <el-radio label="外部项目">外部项目</el-radio>
                        <el-radio label="公司项目">公司项目</el-radio>
                        <el-radio label="TC项目">TC项目</el-radio>
                      </el-radio-group>
                    </el-form-item>
                    <el-form-item label="项目类型" prop="projectType">
                      <el-select
                        placeholder="请选择项目类型"
                        clearable
                        :disabled="isLook"
                        :size="medium"
                        v-model="formData.projectType"
                      >
                        <el-option label="安全生产管理体系咨询" value="安全生产管理体系咨询"></el-option>
                        <el-option label="安全生产标准化达标评级" value="安全生产标准化达标评级"></el-option>
                        <el-option label="应急管理咨询" value="应急管理咨询"></el-option>
                        <el-option label="课件及题库" value="课件及题库"></el-option>
                        <el-option label="生产智能风险管控平台" value="生产智能风险管控平台"></el-option>
                        <el-option label="基建智能风险管控" value="基建智能风险管控"></el-option>
                        <el-option label="发电企业安全教育培训系统" value="发电企业安全教育培训系统"></el-option>
                        <el-option label="承包商管控系统" value="承包商管控系统"></el-option>
                        <el-option label="现场管控硬件" value="现场管控硬件"></el-option>
                        <el-option label="其他" value="其他"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="阿米巴长" prop="projectManagerName">
                      <el-input
                        type="text"
                        :disabled="isLook"
                        :size="medium"
                        readonly
                        v-model="formData.projectManagerName"
                        clearable
                        placeholder="请选择阿米巴长"
                      />
                    </el-form-item>
                    <el-form-item label="隶属销售" prop="affiliateSaleName">
                      <el-input
                        type="text"
                        :disabled="isLook"
                        :size="medium"
                        readonly
                        v-model="formData.affiliateSaleName"
                        clearable
                        placeholder="请选择隶属销售"
                      />
                    </el-form-item>
                    <el-form-item label="线索提供人" prop="leadProviderName">
                      <el-input
                        :disabled="isLook"
                        v-model="formData.leadProviderName"
                        type="text"
                        clearable
                        :size="medium"
                        placeholder="请输入线索提供人"
                      ></el-input>
                    </el-form-item>
                    <!--                @click.native="amoebaOpen"-->
                    <el-form-item
                      label="项目概要"
                      prop="projectSummary"
                      class="sel-width"
                    >
                      <el-input
                        :disabled="isLook"
                        type="textarea"
                        :rows="4"
                        placeholder="请输入项目概要"
                        v-model="formData.projectSummary"
                      >
                      </el-input>
                    </el-form-item>
                  </el-form>
                </el-collapse-item>
              </el-collapse>
              <el-collapse v-model="activeNames">
                <el-collapse-item name="2">
                  <template slot="title">
                    <div class="always_title1">
                      <div></div>
                      文档内容
                    </div>
                  </template>
                  <el-table v-loading="loading" @selection-change="handleSelectionChange" :data="fileListData" stripe>
                    <el-table-column label="文档主题" align="left" prop="missionTheme" >
                      <template slot-scope="scope">
                        <div class="ellipsis">
                          <a href="javascript:void(0)" @click="onPreviewFile(scope.row)" style="color: #409eff">{{ scope.row.fileName }}</a>
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column label="文档类型" align="left" width="130">
                      <template slot-scope="scope">
                        <div class="ellipsis">{{ scope.row.fileType }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column class="ellipsis" label="创建人" align="left" prop="estimateManHour" width="100">
                      <template slot-scope="scope">
                        <div class="ellipsis">{{ scope.row.createByName }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column class="ellipsis" label="创建时间" align="left" prop="workHour" width="180">
                      <template slot-scope="scope">
                        <div class="ellipsis">{{ scope.row.createTime | formatDate }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="size" label="操作" width="100">
                      <template slot-scope="{ row }">
                        <el-button  type="warning" @click="fileDownload(row)">下载</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-collapse-item>
              </el-collapse>
            </div>
          </el-col>
        </el-row>
        <el-drawer
          :title= titleDrawer
          :visible.sync="drawer"
          :direction="direction"
          :before-close="handleClose">
          <el-table :data="beforeFileList" >
            <el-table-column label="文档主题" align="left" prop="fileName">
              <template slot-scope="{row}">
                <div class="ellipsis">
                  <a href="javascript:void(0)" @click="onPreviewFile(row)" style="color: #409eff">{{ row.fileName }}</a>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="文件类型" align="left" prop="fileType" />
            <el-table-column label="创建人" align="left" prop="createByName" />
            <el-table-column label="创建时间" align="left" prop="createTime">
              <template slot-scope="{row}">
                <div class="ellipsis">{{ row.createTime | formatDate }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="size" label="操作">
              <template slot-scope="{ row }">
                <el-button  type="warning" @click="fileDownload(row)">下载</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-drawer>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import CustomButtons from "@/components/CustomButton/CustomButton.vue";
import {getToken} from "@/utils/auth";
import { addLead, getInit,editLead,addLeadAndFile,editLeadAndNotice,addLeadAndNotice} from "@/api/system/mis/init";
import {delFileInfo, download, preview} from "@/api/system/sysFileInfo/fileInfo";
import {addFile, delFile, listFile, onlinePreview, queryBeforFile} from "@/api/system/mis/file";
import moment from "moment";
import Vue from "vue";
export default {
  dicts: ['mis_file_type'],
  components: {
    CustomButtons,
  },
  props: {
    salesDataOpen: {
      type: Boolean,
      default: false,
    },
    id: {
      type: String,
      default: undefined,
    },
    salesTitle: {
      type: String,
      default: undefined,
    },
  },
  data() {
    return {
      number: 0,
      uploadList: [],
      bigPrice: 0,
      dialogImageUrl: "",
      dialogVisible: false,
      baseUrl: process.env.VUE_APP_BASE_API,
      uploadFileUrl: process.env.VUE_APP_BASE_API + "/system/fileInfo/upload", // 上传文件服务器地址
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      imgurl: [],
      newfileList: [],
      isIspos: false,
      fileShow: true,
      actualScore: 0,
      fileList: [],
      fileListData: [],
      beforeFileList: [],
      titleDrawer:'历史附件',
      drawer:false,
      showButton: true,
      buttonLoading: false,
      direction: 'rtl',
      medium: "medium",
      activeNames: ["0", "1", "2"],
      tableData: [],
      selectedRows: [],
      deptsOptions: [],
      fileDialog: false, // 文档新增窗口
      buttonShow: true,
      fileFormData: {}, // 项目文档
      gist: false,
      customerOpen: false,
      loading: false,
      flagNew: false,
      handleShow: true,
      eventTitle: undefined,
      subject: '',
      formData: {
        id: undefined,
        refId: undefined,
        salesLeadName: undefined,
        primaryCustomer: undefined,
        leadSource: undefined,
        leadProviderName: undefined,
        projectName: undefined,
        projectCode: undefined,
        projectType: undefined,
        projectManagerName: undefined,
        projectSummary: undefined,
        createByName:undefined,
        accountCategory:'外部项目'
      },

      fileHidden: true,
      title: "",
      rulesFile:{
        fileType: [
          { required: true, message: '文档类型不能为空', trigger: 'blur' }
        ],
      },
      rules: {
        salesLeadName: [
          {
            required: true,
            message: "请输入线索名称",
            trigger: "change",
          },
        ],
        projectManagerName: [
          {
            required: true,
            message: "请选择阿米巴长",
            trigger: "change",
          },
        ],
        primaryCustomer: [
          {
            required: true,
            message: "请选择客户",
            trigger: "change",
          },
        ],
        leadSource: [
          {
            required: true,
            message: "请选择线索来源",
            trigger: "change",
          },
        ],
        projectName: [
          {
            required: true,
            message: "请输入项目名称",
            trigger: "change",
          },
        ],
        accountCategory: [
          {
            required: true,
            message: "请选择科目",
            trigger: "change",
          },
        ],
        projectCategoryName: [
          {
            required: true,
            message: "请选择项目类别",
            trigger: "change",
          },
        ],
        projectType: [
          {
            required: true,
            message: "请选择项目类型",
            trigger: "change",
          },
        ],
      },
      // 项目文档
      fileQueryParams: {
        pageNum: 1,
        pageSize: 10,
        refId: undefined,
        queryAll: undefined
      },
      peopleOpen: false,
      peopleOpen1: false,
      amoebaeOpen: false,
      isClear: false,
      peopleType: '',
      FILEFileList: [],
      FILEUploadHeaders: {},
      FILEUploadData: {},
      btLoading: false,
      showDrawer: false,
      historyList: [],
      historyIndex: 0,
      listQueryParams: {},
      isLook: true,
      selectedRowsTask: [],
      salesTitle: undefined,
    };
  },
  computed: {
  },
  filters: {
    formatDate: function(value) {
      if (value) {
        return moment(value).format('YYYY-MM-DD')
      }
    }
  },
  created() {
    this.getList();
  },
  watch: {
    id(row){
      this.getList()
      this.queryFile();
    },
  },
  mounted() {
  },
  methods: {
    /** 查询项目列表 */
    getList() {
      if (this.id !== undefined) {
        getInit(this.id).then(response => {
          this.formData = response.data;
        });
      }
    },
    handleNotice(){
      this.$refs["vForm"].validate((valid) => {
        if (valid) {
          this.peopleOpen = true
          this.isClear =true
          this.peopleType = 'notice'
        }
      })
    },
    queryFile(){
      debugger
      this.fileQueryParams.refId = this.id;
      listFile(this.fileQueryParams).then(response => {
        this.fileListData = response.rows;
        this.fileTotal = response.total;
      });
    },
    handleClose() {
      this.drawer = !this.drawer;
    },
    // 文件的在线预览
    onPreviewFile(row){
      const fileExtension = row.fileName.split('.').pop();

      if (fileExtension === 'png' || fileExtension === 'jpg') {
        this.$modal.loading("正在加载...");
        preview(row.fileId).then((s) =>{
          if (s != ""){
            this.dialogImageUrl = window.URL.createObjectURL(new Blob([s], { type: "image/jpeg" }));
            this.fileDialogVisible = true;
            this.$modal.closeLoading();
            return;
          }
        })
      }else if (fileExtension === 'pdf'){
        this.$modal.loading("正在加载...");
        preview(row.fileId).then((response) =>{
          let blob = new Blob([response], { type: 'application/pdf;charset=utf-8' });
          const href = URL.createObjectURL(blob);
          this.$modal.closeLoading();
          window.open(href, 'newWindow');
        })
      } else if (fileExtension === 'xlsx' || fileExtension === 'xls'){
        this.$confirm('此类型文件不可预览, 是否下载?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.fileDownload(row)
        }).catch(() => {

        });
      }else {
        onlinePreview(row.fileId).then((response) => {
          let blob = new Blob([response], { type: 'application/pdf;charset=utf-8' });
          const href = URL.createObjectURL(blob);
          this.$modal.closeLoading();
          window.open(href, 'newWindow');
        })
      }

    },
    //附件下载
    /** 按钮操作 */
    fileDownload(row) {
      this.$modal.loading("下载中")
      download(row.fileId).then((rew) =>{
        this.$modal.closeLoading();
        // 创建临时的下载链接
        const url = window.URL.createObjectURL(rew);
        if (typeof window.chrome !== 'undefined') {
          // chrome
          const link = document.createElement('a');
          link.href = url;
          link.download = row.fileName;
          document.body.appendChild(link);
          link.click();
          setTimeout(() => {
            document.body.removeChild(link);
            URL.revokeObjectURL(url);
          }, 100);
          // window.URL.revokeObjectURL(link.href); // 释放资源
          // window.open("D:/151.pdf")
        } else if (typeof window.navigator.msSaveBlob !== 'undefined') {
          // IE
          // const blob = new Blob([rew],{ type: 'application/octet-stream' });
          window.navigator.msSaveBlob(rew,  row.fileName);
        } else {
          // Firefox
          const file = new File([rew],  row.fileName,{ type: 'application/octet-stream' });
          window.open(URL.createObjectURL(file));
        }

      }).finally(() =>{
      })
    },
    //附件删除
    fileRemove(row){
      this.$confirm(`确定移除 ${row.fileName}？`)
        .then(() => {
          this.$modal.loading("删除中");
          delFile(row.id).then((res) => {
            this.$modal.msgSuccess('删除成功')
            this.$modal.closeLoading()
            this.queryFile();
          })
        }).catch(() => {
      })
    },
    // 以往附件 根据项目的文档类型和项目ID获取文件列表
    queryBefFile(row){
      this.drawer = !this.drawer;
      queryBeforFile(row).then((res) => {
        this.beforeFileList = res.data;
      })
    },
    //  新增项目文档按钮
    handleAddFile() {
      this.$refs["vForm"].validate((valid) => {
        if (valid) {
          if (this.fileFormData.fileType != undefined) {
            this.fileFormData.fileType = "";
          }
          if (this.tableData.length > 0) {
            this.tableData = [];
            this.$refs.upload.clearFiles(); // 清空上传组件的文件列表
          }
          this.fileFormData.projectName = this.formData.projectName
          this.fileFormData.projectCode = this.formData.projectCode
          this.fileFormData.projectId = this.formData.id
          this.fileFormData.createByName = this.$store.state.user.nikename
          this.fileFormData.createBy = this.$store.state.user.name
          this.fileFormData.createTime = new Date()
          this.fileFormData.createTime = moment().format('YYYY-MM-DD HH:mm:ss')
          this.fileDialog = true
        } else {
          this.$message.warning("请先把表单数据补充完整!");
        }
      })
    },
    // 对象转成指定字符串分隔
    listToString(list, separator) {
      let strs = ''
      separator = separator || ','
      for (let i in list) {
        strs += list[i].ossId + separator
      }
      return strs != '' ? strs.substr(0, strs.length - 1) : ''
    },
    //文件上传
    handleBeforeUpload(file) {
      // 校检文件类型
      // 校检文件大小
      if (this.fileSize) {
        const isLt = file.size / 1024 / 1024 < this.fileSize
        if (!isLt) {
          this.$modal.msgError(`上传文件大小不能超过 ${this.fileSize} MB!`)
          return false
        }
      }
      this.$modal.loading('正在上传文件，请稍候...')
      this.number++
      return true
    },
    // 文件个数超出
    handleExceed() {
      this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`)
    },
    // 上传失败
    handleUploadError(err) {
      this.$modal.msgError('上传文件失败，请重试')
      this.$modal.closeLoading()
    },
    // 上传成功回调
    handleUploadSuccess(res, file) {
      if (res.code === 200) {
        this.tableData.push({
          fileName: res.data.fileName,
          fileSize: res.data.fileSize + 'KB',
          fileUrl: res.data.fileUrl,
          ID: res.data.id,
          businessKey: '',
          updateBy: res.data.updateBy,
          updateTime: res.data.updateTime,
          createBy: res.data.createBy,
          createTime: res.data.createTime,
          createByName: res.data.createByName,
          oldFileName: res.data.oldFileName
        })
        this.uploadList.push({
          name: res.data.fileName,
          url: res.data.url,
          ossId: res.data.ossId
        })
        this.uploadedSuccessfully();
      } else {
        this.number--
        this.$modal.closeLoading()
        this.$modal.msgError(res.msg)
        this.$refs.fileUpload.handleRemove(file)
        this.uploadedSuccessfully()
      }
    },
    handleRemove(file, fileList) {
      // 文件删除时，同时从表格数据中删除对应的文件信息
      this.fileList = fileList.filter((item) => {
        return this.tableData.some((data) => data.fileName === item.name)
      })
      this.tableData = this.tableData.filter(
        (item) => item.fileName !== file.name
      )
    },
    // 上传结束处理
    uploadedSuccessfully() {
      if (this.number > 0 && this.uploadList.length === this.number) {
        this.fileList = this.fileList.concat(this.uploadList)
        this.uploadList = []
        this.number = 0
        this.$emit('input', this.listToString(this.fileList))
        this.$modal.closeLoading()
      }
    },
    deleteSelectedRowsTask(event) {
      event.stopPropagation()
      if (this.selectedRowsTask.length == 0){
        return this.$message.warning('请选择要删除的数据')
      }
      //获取选中数据
      let ids = ''
      this.$confirm(`确定移除 ？`)
        .then(() => {
          this.selectedRowsTask.forEach((row) => {
            if (row.id == undefined) {
              ids += row.ID + ','
            } else {
              ids += row.id + ','
            }
            const index = this.taskTableData.indexOf(row)
            if (index !== -1) {
              this.taskTableData.splice(index, 1)
              this.taskFileList.splice(index, 1)
            }
          })
          ids = ids.substring(0, ids.length - 1)
          delFileInfo(ids).then((res) => {
          })
          this.selectedRowsTask = []
        })
        .catch(() => {
        })
    },
    deleteSelectedRows(event) {
      event.stopPropagation()
      //获取选中数据
      let ids = ''
      this.$confirm(`确定移除 ？`)
        .then(() => {
          this.selectedRows.forEach((row) => {
            if (row.id == undefined) {
              ids += row.ID + ','
            } else {
              ids += row.id + ','
            }
            const index = this.tableData.indexOf(row)
            if (index !== -1) {
              this.tableData.splice(index, 1)
              this.fileList.splice(index, 1)
            }
          })
          ids = ids.substring(0, ids.length - 1)
          delFileInfo(ids).then((res) => {
          })
          this.selectedRows = []
        })
        .catch(() => {
        })
    },
    handleSelectionChange(val) {
      this.selectedRows = val
    },
    handleBack() {
      // 传递数据
      this.$router.push({
        path: "/project/saleslead",
        query: {
        },
      });
    },
    getDataByOne(id){
      getInit(id).then(response => {
        this.formData = response.data;
      });
    },
    cancel() {
      this.$emit("cancel");
    },
  },
};
</script>


<style lang="scss" scoped>
.el_col {
  display: flex;
  justify-content: space-evenly;
  align-content: center;
}

.card-container {
  height: 80%; /* 设置容器的高度为 100% */
  display: flex;
  flex-direction: column;
}

.card-item {
  flex: 1; /* 平分容器的宽度 */
}

#FormDialog {
  height: 100%;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

.dialog-footer1 {
  width: 100%;
  height: 6vh;
  background: #ffffff;
  text-align: center;
  line-height: 6vh;
}

.el-card {
  margin-top: 10px;
}

.el-select {
  width: 100%;
}

.el-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.el-form-item {
  width: 30%;
}

.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}

.el-form-item {
  margin-bottom: 22px;
}

.el-table {
  min-height: 50% !important;
}

.always_handerOne {
  height: 80px;
  background-color: #ffffff;
  //border-radius: 14px;
}

.always_handerOne1 {
  height: auto;
  background-color: #ffffff;
  //border-radius: 14px;
  padding: 20px;
}

.always_title {
  font-size: 20px;
  font-weight: bold;
  line-height: 53px;
  margin-left: 30px;
}

.always_title1 {
  font-size: 18px;
  font-weight: bold;
  // line-height: 53px;
  margin-left: 15px;
  position: relative;
}

.always_title1 ::before {
  content: "|";
  flex-shrink: 0;
  width: 4px;
  height: 6%;
  margin-left: 12px;
  // background: #f90;
  color: #f90;
  position: absolute;
  left: -22px;
  margin-bottom: 12px;
}

.always_hander {
  height: 20px;
  width: 100%;
}

.margin_col {
  margin-bottom: 20px;
}

.el_formContent .el-form-item {
  width: 50%;
}

.imageList {
  display: flex;
}

.demonstration {
  text-align: center;
}

.sel-width {
  width: 90%;
}

.el-header {
  padding: 0px 0px;
}

.el-radio-group {
  display: flex;
  line-height: 1;
  vertical-align: middle;
  font-size: 0;
}

.styleCentre {
  line-height: 2.5;
}

.style-Change {
  padding: 0px 0px;
  background: #ffffff;
}

.el-slider__bar {
  height: 6px;
  background-color: red !important;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  position: absolute;
}

.el-tooltip el-slider__button {
  border: solid 2px #49ff7d;
}
</style>
<style scoped>
/deep/ .el-upload {
  width: 100px;
  height: 40px;
  line-height: 45px;
}

/deep/ .el-upload .el-upload-dragger {
  width: 100px;
  height: 100px;
  line-height: 100px;
}

/deep/ .el-upload-list--picture-card .el-upload-list__item {
  width: 100px;
  height: 100px;
  line-height: 100px;
}

/deep/ .upload-file-uploader {
  width: 400%;
  line-height: 0.2;
  height: 100%;
}

/deep/ .el-upload-list__item-thumbnail {
  max-width: 140px; /* 设置图片最大宽度*/
  max-height: 100px; /* 设置图片最大高度 */
  width: auto; /* 宽度自适应*/
  height: auto; /* 高度自适应*/
}

/deep/ .el-radio {
  color: #606266;
  font-weight: 500;
  line-height: 3;
  position: relative;
  cursor: pointer;
  display: inline-block;
  white-space: nowrap;
  outline: none;
  font-size: 14px;
  margin-right: 30px;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

/deep/ .el-slider__runway.show-input {
  margin-right: 330px;
  width: auto;
}

/deep/ .el-slider__input {
  float: right;
  margin-top: 3px;
  width: 130px;
  margin-right: 167px;
}

/deep/ .el-form-item__error {
  color: #ff4949;
  font-size: 12px;
  line-height: 1;
  padding-top: 4px;
  position: absolute;
  top: 100%;
  width: 120px;
  left: 0;
}

/deep/ .el-form-item[data-v-2b0fc66d] {
  margin-bottom: 19px;
}

.form-item {
  width: 100%;
  height: 20vh;
}

.copy-text-box {
  background: #f5f5f5;
  padding: 6px 10px;
  border-radius: 5px;
  height: 15vh;
  font-size: 13px;
  overflow-y: scroll;
  cursor: pointer;
}

.block_file_name {
  line-height: 1.2;
  width: 400%;
}

::v-deep .el-upload-list__item.is-ready,
.el-upload-list__item.is-uploading {
  display: none !important;
}

::v-deep .el-upload-list__item {
  transition: none !important;
}

::v-deep .el-checkbox-button.is-checked .el-checkbox-button__inner {
  background-color: #e8f4ff !important;
  border: 1px solid #409eff !important;
  color: #409eff !important;
  /* background-color: var(--fill-color) !important;
  border: 1px solid var(--fill-border) !important;
  color: #000 !important;   */
}

.ces {
  width: 33.2%;
}

::v-deep .el-checkbox-button__inner {
  width: 100%;
}

::deep .el-form-item--medium {
  width: 30%;
}

::v-deep .el-input-number--medium {
  width: 100%;
}

::v-deep .el-input-number__decrease {
  width: 33.2%;
}

::v-deep .el-input-number__increase {
  width: 33.2%;
}

::v-deep .el-drawer__header {
  height: 35px;
  margin: 20px 30px;
  border-radius: 4px;
  border-left: 5px solid #0169ff;
  background-color: white;
  line-height: 34px;
  padding-left: 18px;
  color: #0169ff;
  background-image: linear-gradient(90deg, #f2f7ff 0%, #ffffff 95%);
  border-radius: 4px;
  font-size: 18px;
  font-weight: 500;
  padding-top: 0px;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
  height: 20%;
  background-color: #f8faff;
  margin-top: 20px;
}

.cardImg {
  width: 24px;
  height: 24px;
  display: inline-block;
  vertical-align: middle;
}

.titleStyle {
  font-family: PingFangSC-Medium;
  font-size: 16px;
  color: #000000;
  letter-spacing: 0.8px;
  line-height: 20px;
  font-weight: 500;
  margin-left: 8px;
}

::v-deep .el-card__body {
  overflow-y: scroll;
  cursor: pointer;
  padding: 6px 10px;
  height: 70%;
  font-size: 13px;
}

::v-deep .el-button--mini {
  padding: 10px 20px;
}

::v-deep .el-drawer__header {
  min-height: 7% !important;
  height: auto;
}

::v-deep .el-card__header {
  height: 30%;
}
</style>
